<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/project.js"></script>
</head>
<body>
<header>
    <div class="container">
        <div class="logo">
            <a href="index.html">Steel Industry</a>
        </div>
        <div class="icn">
            <ul>
                <li><a href="#" style="background: #42A5F5"><img class="icn_img" src="images/facebook.png"></a></li>
                <li><a href="#"><img class="icn_img" src="images/twitter.png"></a></li>
                <li><a href="#"><img class="icn_img" src="images/gpluse.png"></a></li>
                <li><a href="#"><img class="icn_img" src="images/rss.png"></a></li>
            </ul>
        </div>
    </div>
</header>
<div class="top_nav">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="index.html" style="border-left: 1px solid #5a5e61;">HOME</a></li>
                <li><a href="index.html">ABOUT</a></li>
                <li><a href="index.html">SERVICES</a></li>
                <li><a href="index.html">GALLERY</a></li>
                <li><a href="index.html">CONTACT</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner " role="listbox">
        <div class="item active">
            <img class="slider" src="images/slider1.jpg">
        </div>
        <div class="item ">
            <img class="slider" src="images/slider2.jpg">
        </div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="headline">
            <h1>WHAT WE DO</h1>
            <h5></h5>
            <div style="clear: both"></div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-3 card">
                <div class="card_content">
                    <h4 ><img src="images/g1.png">Nemo enim</h4>
                    <p>Lorem ipsum dolor quis nostrudx ea comvoluptate velit esse cillum nulla pariatur.</p>
                </div>
            </div>
            <div class="col-sm-6 col-md-3 card">
                <div class="card_content">
                    <h4 ><img src="images/g2.png">Destinations</h4>
                    <p>comvoluptate velit esse cillum nulla Lorem ipsum dolor quis nostrudx ea pariatur.</p>
                </div>
            </div>
            <div class="col-sm-6 col-md-3 card">
                <div class="card_content">
                    <h4 ><img src="images/g3.png">Events</h4>
                    <p>Lorem ipsum dolor quis nostrudx ea comvoluptate velit esse cillum nulla pariatur.</p>
                </div>
            </div>
            <div class="col-sm-6 col-md-3 card">
                <div class="card_content">
                    <h4 ><img src="images/g4.png">Plans</h4>
                    <p>Lorem ipsum dolor quis nostrudx ea comvoluptate velit esse cillum nulla pariatur.</p>
                </div>
            </div>
        </div>

        <div class="read">
            <div class="read_text">
                <h2>Lorem Ipsum is simply text of typesetting industry</h2>
                <p>comvoluptate velit esse cillum dolore eu fugiat....</p>
            </div>
            <button class="read_button ">Read More</button>
            <div class="clearfix"></div>
        </div>
        <div class="headline img_headline">
            <h1>OUR WORK</h1>
            <h5></h5>
            <div style="clear: both"></div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-3 img_content">
                <div style="position: relative">
                <img src="images/p1.jpg">
                <div class="img_text">
                    <h3>Image Description</h3>
                    <p>This is the description of this image. You may use.</p>
                    <a href="#">ReadMore</a>
                </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3 img_content">
                <div style="position: relative">
                <img src="images/p2.jpg">
                <div class="img_text">
                    <h3>Image Description</h3>
                    <p>This is the description of this image. You may use.</p>
                    <a href="#">ReadMore</a>
                </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3 img_content">
                <div style="position: relative">
                <img src="images/p3.jpg">
                <div class="img_text">
                    <h3>Image Description</h3>
                    <p>This is the description of this image. You may use.</p>
                    <a href="#">ReadMore</a>
                </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3 img_content">
                <div style="position: relative">
                <img src="images/p4.jpg">
                <div class="img_text">
                    <h3>Image Description</h3>
                    <p>This is the description of this image. You may use.</p>
                    <a href="#">ReadMore</a>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 footer_div">
                <h3 class="footer_title">about us</h3>
                <p class="footer_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <a class="footer_button" href="#">ReadMore</a>
            </div>
            <div class="col-sm-3 footer_div">
                <h3 class="footer_title">Recent posts</h3>
                <ul>
                    <li><a href="#">eiusmod tempor incididunt</a></li>
                    <li><a href="#">adipisicing elit, sed</a></li>
                    <li><a href="#">mod tempor incididunt ut</a></li>
                    <li><a href="#">dipisicing elit, sed do</a></li>
                    <li><a href="#">econsectetur adipisicing</a></li>
                </ul>
            </div>
            <div class="col-sm-3 thess_div footer_div">
                <h3 class="footer_title">Latest Tweets</h3>
                <p><a href="#">@Lorem ipsum</a>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                <span><a href="#">10 minutes ago</a></span>
                <p><span>@consectetur</span>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                <span><a href="#">15 minutes ago</a></span>
            </div>
            <div class="col-sm-3 footer_div">
                <h3 class="footer_title">DID YOU KNOW?</h3>
                <p class="footer_text">Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                <a class="footer_button" href="#">ReadMore</a>
            </div>

        </div>
    </div>
    <div class="clearfix"></div>

</footer>
<div class="footer_bottom">
    <p>Copyright © 2016.Company name All rights reserved.</p>
</div>
</body>
</html>